<template>
  <div class="personal-center">
    <el-card class="personal-info" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
      <h2 class="title-style">学生个人中心</h2>
      <el-form :model="studentInfo" label-width="120px">
        <el-row :gutter="40" class="center-row" style="width: 100%;">
          <el-col :span="12">
            <el-form-item label="学号">
              <el-input v-model="studentInfo.studentId" disabled class="disabled-style"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="studentInfo.studentName" :disabled="!isEdit" class="disabled-style"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="studentInfo.password" :disabled="!isEdit" class="disabled-style" type="password"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="studentInfo.gender" :disabled="!isEdit" class="disabled-style"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="班级ID">
              <el-input v-model="studentInfo.classId" disabled class="disabled-style"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="studentInfo.phone" :disabled="!isEdit" class="disabled-style"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="studentInfo.email" :disabled="!isEdit" class="disabled-style"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="studentInfo.age" :disabled="!isEdit" class="disabled-style"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="button-container">
              <template v-if="!isEdit">
                <el-button type="primary" @click="isEdit = true">修改信息</el-button>
              </template>
              <template v-else>
                <el-button type="primary" @click="handleSaveEdit">保存修改</el-button>
                <el-button type="default" @click="handleCancelEdit" style="margin-left: 10px">取消修改</el-button>
              </template>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";

// 学生信息数据模型（根据图片字段调整）
const studentInfo = ref({
  studentId: "", // 学生学号
  studentName: "", // 姓名
  password: "", // 密码
  gender: "", // 性别
  classId: "", // 班级ID
  phone: "", // 手机号
  email: "", // 邮箱
  age: 0, // 年龄
});

const isEdit = ref(false); // 编辑状态
const originalStudentInfo = ref({}); // 原始信息备份

// 挂载时获取学生信息
onMounted(async () => {
  try {
    const studentId = ref(localStorage.getItem('studentId') || '');
    const response = await axios.get(`/students/getStudentDetail?studentId=${studentId.value}`);
    studentInfo.value = response.data.result;
    originalStudentInfo.value = { ...studentInfo.value }; // 保存原始数据
  } catch (error) {
    console.error("获取学生信息失败", error);
    ElMessage.error("获取个人信息失败，请稍后重试");
  }
});

// 保存修改
const handleSaveEdit = async () => {
  try {
    const formData = new FormData();

    // 提交可修改的字段（根据业务需求调整）
    formData.append("studentName", studentInfo.value.studentName);
    formData.append("password", studentInfo.value.password);
    formData.append("gender", studentInfo.value.gender);
    formData.append("phone", studentInfo.value.phone);
    formData.append("email", studentInfo.value.email);
    formData.append("age", studentInfo.value.age);

    const studentId = localStorage.getItem('studentId') || '';
    const updateResponse = await axios.post(`/students/updateStudent?studentId=${studentId}`, formData);

    if (updateResponse.data.flag) {
      // 更新成功后重新获取信息
      const freshResponse = await axios.get(`/students/getStudentDetail?studentId=${studentId}`);
      studentInfo.value = freshResponse.data.result;
      originalStudentInfo.value = { ...studentInfo.value }; // 更新备份
      isEdit.value = false;
      ElMessage.success("学生信息修改成功");
    } else {
      ElMessage.error(updateResponse.data.message || "保存信息失败，请稍后重试");
    }
  } catch (error) {
    console.error("保存信息失败", error);
    ElMessage.error("保存信息失败，请稍后重试");
  }
};

// 取消修改，恢复原始数据
const handleCancelEdit = () => {
  studentInfo.value = { ...originalStudentInfo.value };
  isEdit.value = false;
};
</script>

<style scoped>
.personal-center {
  width: 100%;
  padding: 20px;
  display: flex;
  justify-content: center;
}

.personal-info {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
  width: 80%;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}

.title-style {
  margin-bottom: 20px;
  color: #136bbd;
  font-size: 24px;
  font-weight: 500;
}

.disabled-style {
  cursor: default;
  background-color: #f5f7fa;
}
.disabled-style:hover {
  cursor: pointer;
  background-color: #f5f7fa;
}

.button-container {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: 20px;
}

.center-row {
  display: flex;
  justify-content: center;
  width: 100%;
}

.el-form-item {
  width: 100%;
}
</style>